
<h1>Pure Grids Demo</h1>
<div class="pure-g-r">
  <div class="pure-u-1">
    <div class="wrap-col">pure-u-1</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-1-2">
    <div class="wrap-col">pure-u-1-2</div>
  </div>
  <div class="pure-u-1-2">
    <div class="wrap-col">pure-u-1-2</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-1-3">
    <div class="wrap-col">pure-u-1-3</div>
  </div>
  <div class="pure-u-1-3">
    <div class="wrap-col">pure-u-1-3</div>
  </div>
  <div class="pure-u-1-3">
    <div class="wrap-col">pure-u-1-3</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-1-4">
    <div class="wrap-col">pure-u-1-4</div>
  </div>
  <div class="pure-u-1-4">
    <div class="wrap-col">pure-u-1-4</div>
  </div>
  <div class="pure-u-1-4">
    <div class="wrap-col">pure-u-1-4</div>
  </div>
  <div class="pure-u-1-4">
    <div class="wrap-col">pure-u-1-4</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-1-5">
    <div class="wrap-col">pure-u-1-5</div>
  </div>
  <div class="pure-u-1-5">
    <div class="wrap-col">pure-u-1-5</div>
  </div>
  <div class="pure-u-1-5">
    <div class="wrap-col">pure-u-1-5</div>
  </div>
  <div class="pure-u-1-5">
    <div class="wrap-col">pure-u-1-5</div>
  </div>
  <div class="pure-u-1-5">
    <div class="wrap-col">pure-u-1-5</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-1-6">
    <div class="wrap-col">pure-u-1-6</div>
  </div>
  <div class="pure-u-1-6">
    <div class="wrap-col">pure-u-1-6</div>
  </div>
  <div class="pure-u-1-6">
    <div class="wrap-col">pure-u-1-6</div>
  </div>
  <div class="pure-u-1-6">
    <div class="wrap-col">pure-u-1-6</div>
  </div>
  <div class="pure-u-1-6">
    <div class="wrap-col">pure-u-1-6</div>
  </div>
  <div class="pure-u-1-6">
    <div class="wrap-col">pure-u-1-6</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-1-8">
    <div class="wrap-col">pure-u-1-8</div>
  </div>
  <div class="pure-u-1-8">
    <div class="wrap-col">pure-u-1-8</div>
  </div>
  <div class="pure-u-1-8">
    <div class="wrap-col">pure-u-1-8</div>
  </div>
  <div class="pure-u-1-8">
    <div class="wrap-col">pure-u-1-8</div>
  </div>
  <div class="pure-u-1-8">
    <div class="wrap-col">pure-u-1-8</div>
  </div>
  <div class="pure-u-1-8">
    <div class="wrap-col">pure-u-1-8</div>
  </div>
  <div class="pure-u-1-8">
    <div class="wrap-col">pure-u-1-8</div>
  </div>
  <div class="pure-u-1-8">
    <div class="wrap-col">pure-u-1-8</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-1-12">
    <div class="wrap-col">pure-u-1-12</div>
  </div>
  <div class="pure-u-1-12">
    <div class="wrap-col">pure-u-1-12</div>
  </div>
  <div class="pure-u-1-12">
    <div class="wrap-col">pure-u-1-12</div>
  </div>
  <div class="pure-u-1-12">
    <div class="wrap-col">pure-u-1-12</div>
  </div>
  <div class="pure-u-1-12">
    <div class="wrap-col">pure-u-1-12</div>
  </div>
  <div class="pure-u-1-12">
    <div class="wrap-col">pure-u-1-12</div>
  </div>
  <div class="pure-u-1-12">
    <div class="wrap-col">pure-u-1-12</div>
  </div>
  <div class="pure-u-1-12">
    <div class="wrap-col">pure-u-1-12</div>
  </div>
  <div class="pure-u-1-12">
    <div class="wrap-col">pure-u-1-12</div>
  </div>
  <div class="pure-u-1-12">
    <div class="wrap-col">pure-u-1-12</div>
  </div>
  <div class="pure-u-1-12">
    <div class="wrap-col">pure-u-1-12</div>
  </div>
  <div class="pure-u-1-12">
    <div class="wrap-col">pure-u-1-12</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
</div>
<h1>24ths-Based Units</h1>
<div class="pure-g-r">
  <div class="pure-u-1-24">
    <div class="wrap-col">pure-u-1-24</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-1-12">
    <div class="wrap-col">pure-u-1-12</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-1-8">
    <div class="wrap-col">pure-u-1-8</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-1-6">
    <div class="wrap-col">pure-u-1-6</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-5-24">
    <div class="wrap-col">pure-u-5-24</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-1-4">
    <div class="wrap-col">pure-u-1-4</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-7-24">
    <div class="wrap-col">pure-u-7-24</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-1-3">
    <div class="wrap-col">pure-u-1-3</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-3-8">
    <div class="wrap-col">pure-u-3-8</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-5-12">
    <div class="wrap-col">pure-u-5-12</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-11-24">
    <div class="wrap-col">pure-u-11-24</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-1-2">
    <div class="wrap-col">pure-u-1-2</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-13-24">
    <div class="wrap-col">pure-u-13-24</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-7-12">
    <div class="wrap-col">pure-u-7-12</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-5-8">
    <div class="wrap-col">pure-u-5-8</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-2-3">
    <div class="wrap-col">pure-u-2-3</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-17-24">
    <div class="wrap-col">pure-u-17-24</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-3-4">
    <div class="wrap-col">pure-u-3-4</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-19-24">
    <div class="wrap-col">pure-u-19-24</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-5-6">
    <div class="wrap-col">pure-u-5-6</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-7-8">
    <div class="wrap-col">pure-u-7-8</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-11-12">
    <div class="wrap-col">pure-u-11-12</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-23-24">
    <div class="wrap-col">pure-u-23-24</div>
  </div>
</div>
<div class="pure-g-r">
  <div class="pure-u-1">
    <div class="wrap-col">pure-u-1</div>
  </div>
</div>